// When color definition differs for dark and light variant,
// it gets @if-ed depending on $variant
-$base_color: if($variant == 'light', #fff, darken(desaturate(#2a2a2a, 20%), 2%));
-$bg_color: if($variant == 'light', #f6f5f4, #2a2a2a);
+$base_color: if($variant == 'light', #fff, darken(desaturate(#241f31, 100%), 2%));
+$bg_color: if($variant == 'light', #f6f5f4, lighten($base_color, 5%));
$fg_color: if($variant == 'light', transparentize(black, .2), white);
$selected_fg_color: #fff;
$shadow_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(0,0,0,0.2));
// overview background color
-$system_bg_color: if($variant == 'light', darken(desaturate($bg_color, 100%), 35%), darken($bg_color, 2%));
+$system_bg_color: $base_color;
//insensitive state derived colors
$insensitive_fg_color: mix($fg_color, $bg_color, 50%);
// padding, margin and spacing
$base_padding: 6px;
$base_margin: 4px;
-$base_spacing: 6px;
// border radii
$base_border_radius: 8px;
// radii of things that display over other things, e.g. popovers
$modal_radius: $base_border_radius*2; // 24px
-// non-standard colors
-$bubble_borders_color: lighten($borders_color, if($variant=='light', 0%, 5%));
-$bubble_buttons_color: if($variant == 'light', darken($bg_color, 12%), lighten($bg_color, 4%));
-// $bubble_borders_color: if($variant == 'light', rgba(255,255,255,0.1), rgba(0,0,0,0.3));
-
// derived hover colors
-$hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 7%));
-$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 7%));
+$hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 4%));
+$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 4%));
// derived active colors
-$active_bg_color: darken($bg_color,if($variant=='light', 9%, 5%));
-$active_fg_color: darken($fg_color,if($variant=='light', 5%, 3%));
+$active_bg_color: if($variant=='light', darken($bg_color, 5%), lighten($bg_color, 6%));
+$active_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 6%));
+
+// derived checked colors
+$checked_bg_color: if($variant=='light', darken($bg_color, 7%), lighten($bg_color, 9%));
+$checked_fg_color: if($variant=='light', darken($fg_color, 7%), lighten($fg_color, 9%));
// fonts
$base_font_size: 11;
// icons
$base_icon_size: 1.09em;
+$large_icon_size: $base_icon_size*2; // 32px
// $base_icon_size: 16px;
// Stage
/* Common Stylings */
-// Text
-%status_text {
- font-size: 2em;
- font-weight: bold;
- color: $osd_fg_color;
-}
-
// osd panels
%osd_panel {
color: $osd_fg_color;
text-align: center;
}
-// button styling
+// dialogs
+%bubble_panel {
+ color: $fg_color;
+ background-color: $bg_color;
+ border-radius: $base_border_radius*1.25 + 1px;
+ border: 1px solid $borders_edge;
+}
+
+// normal button styling
%button {
border-radius: $base_border_radius - 2px; // 6px
border-style: solid;
border-width: 1px;
- min-height: 22px;
font-weight: bold;
- padding: $base_padding * 0.5 $base_padding * 4;
+ padding: $base_padding*.5 $base_padding*4;
@include button(normal);
&:focus { @include button(focus);}
&:hover { @include button(hover);}
&:insensitive { @include button(insensitive);}
- &:active, &:checked { @include button(active);}
-}
-
-// dialogs
-%bubble_panel {
- color: $fg_color;
- background-color: $bg_color;
- border-radius: $base_border_radius*1.25 + 1px;
- border: 1px solid $borders_edge;
+ &:active { @include button(active);}
+ &:checked { @include button(checked);}
}
// buttons in dialogs/notifications
+// lighter in color and have a greater radius
+
$bubble_button_radius:$base_border_radius*1.25;
+$bubble_buttons_color: if($variant == 'light', darken($bg_color, 12%), lighten($bg_color, 7%));
%bubble_button {
padding: $base_padding * 2;
- font-weight: bold;
+ font-weight: bold !important;
+ margin-right: 1px;
@include button(normal, $c:$bubble_buttons_color);
&:insensitive { @include button(insensitive, $c:$bubble_buttons_color);}
&:focus { @include button(focus, $c:$bubble_buttons_color);}
&:hover { @include button(hover, $c:$bubble_buttons_color);}
&:active { @include button(active, $c:$bubble_buttons_color);}
+ &:checked { @include button(checked, $c:$bubble_buttons_color);}
&:first-child:ltr {
border-radius: 0 0 0 $bubble_button_radius;
&:last-child:ltr {
border-radius: 0 0 $bubble_button_radius 0;
- border-right-width: 0 !important;
+ margin-right: 0 !important;
}
&:first-child:rtl {
&:last-child:rtl {
border-radius: 0 0 0 $bubble_button_radius;
- border-left-width: 0 !important;
+ margin-right: 0 !important;
}
&:first-child:last-child {
border-radius: 0 0 $bubble_button_radius $bubble_button_radius !important;
+ margin-right: 0 !important;
}
}
+
+// buttons on OSD elements
+// that are undecorated by default and use OSD colors
+%osd_button {
+ @include button(undecorated);
+ &:insensitive { @include button(undecorated, $c:$osd_bg_color);}
+ &:focus { @include button(focus, $c:$osd_bg_color);}
+ &:hover { @include button(hover, $c:$osd_bg_color);}
+ &:active { @include button(active, $c:$osd_bg_color);}
+ &:outlined,&:checked { @include button(checked, $c:$osd_bg_color);}
+}
+
+/* General Typography */
+
+%large_title {
+ font-weight: 300;
+ @include fontsize(24);
+}
+
+%title_1 {
+ font-weight: 800;
+ @include fontsize(20);
+}
+
+%title_2 {
+ font-weight: 800;
+ @include fontsize(15);
+}
+
+%title_3 {
+ font-weight: 700;
+ @include fontsize(15);
+}
+
+%title_4 {
+ font-weight: 700;
+ @include fontsize(13);
+}
+
+%heading {
+ font-weight: 700;
+ @include fontsize(11);
+}
+
+%caption_heading {
+ font-weight: 700;
+ @include fontsize(9);
+}
+
+%caption {
+ font-weight: 400;
+ @include fontsize(9);
+}
+
+%smaller {
+ font-weight: 400;
+ @include fontsize(8);
+}
+
+%monospace {font-family: monospace;}
+%numeric { font-feature-settings: "tnum";}
// entries
-@mixin entry($t, $fc:$selected_bg_color, $edge: $borders_edge) {
+@mixin entry($t, $fc:$selected_bg_color) {
//
// Entries drawing function
//
// $t: entry type
// $fc: focus color
-// $edge: set to none to not draw the bottom edge or specify a color to not use the default one
//
// possible $t values:
// normal, focus, insensitive
//
@if $t==normal {
- background-color: $base_color;
- border-color: $borders_color;
+ background-color: lighten($bg_color, 5%);
+ color: transparentize($fg_color,0.3);
+ border: 2px solid lighten($bg_color, 5%);
}
+
@if $t==focus {
- border-color: if($fc==$selected_bg_color,
- $selected_borders_color,
- darken($fc,35%));
- box-shadow: inset 0 0 0 2px $fc;
+ background-color: mix(lighten($bg_color, 5%), $selected_bg_color, 95%);
+ border-color: $fc;
+ color: $fg_color;
+ &:hover {}
+ }
+
+ @if $t==hover {
+ background-color:lighten($hover_bg_color, 5%);
+ border-color:lighten($hover_bg_color, 5%);
+ color: transparentize($fg_color,0.3);
}
- @if $t==hover { }
+
@if $t==insensitive {
+ background-color:lighten($insensitive_bg_color, 5%);
+ border-color: lighten($insensitive_bg_color, 5%);
color: $insensitive_fg_color;
- border-color: $insensitive_bg_color;
- box-shadow: none;
}
}
background-color: mix(lighten($c, 8%), $selected_bg_color, 90%);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
}
+ &:active {
+ background-color: mix(lighten($c, 10%), $selected_bg_color, 90%);
+ box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
+ }
}
// hover key
@else if $t==hover {
color: $tc;
- background-color: lighten($c, if($variant == 'light', 8%, 5%));
+ background-color: lighten($c, 7%);
}
// active key
@else if $t==active {
color: $tc;
- background-color: darken($c,3%);
+ background-color: lighten($c, 10%);
+ }
+
+ // checked key
+ @else if $t==checked {
+ color: $tc;
+ background-color: lighten($c, 15%);
}
// insensitive key
// since buttons are all flat an borderless now the mixin is simpler
@mixin button($t, $tc:$fg_color, $c:$bg_color) {
+
+$button_bg_color: mix($tc, $c, 5%);
//
// Button drawing function
//
// normal button
@if $t==normal {
color: $tc;
- background-color: mix($tc, $c, 5%);
+ background-color: $button_bg_color;
}
// focused button
@if $t==focus {
color: $tc;
- background-color: mix(mix($tc, $c, 5%), $selected_bg_color, 90%);
- // border-color: lighten($tc, 3%);
+ background-color: mix($button_bg_color, $selected_bg_color, 90%);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
&:hover {
- background-color: mix(mix($tc, $c, 7%), $selected_bg_color, 90%);
+ background-color: mix(lighten($button_bg_color, 3%), $selected_bg_color, 90%);
+ box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
+ }
+ &:active {
+ background-color: mix(lighten($button_bg_color, 6%), $selected_bg_color, 90%);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
}
}
// hover button
@else if $t==hover {
color: $tc;
- background-color: mix($tc, $c, 7%);
+ background-color: lighten($button_bg_color, 3%);
}
// active button
@else if $t==active {
color: $tc;
- background-color: mix($tc, $c, 2%);
+ background-color: lighten($button_bg_color, 6%);
+ }
+
+ // checked button
+ @else if $t==checked {
+ color: $tc;
+ background-color: lighten($button_bg_color, 9%);
+ &:hover { background-color: lighten($button_bg_color, 12%);}
+ &:active { background-color: lighten($button_bg_color, 15%);}
}
// insensitive button
color: transparentize($selected_fg_color, .5);
}
}
+
// reset
@else if $t==undecorated {
background-color: transparent;
background-color: none;
+ &:insensitive {
+ @include button(insensitive);
+ background-color: transparent;
+ color: transparentize($selected_fg_color, .5);
+ }
}
}
// tile
-@mixin tile($color) {
+@mixin tile_button($color, $flat: true) {
@extend %tile;
- background-color: transparent;
-
- &:hover,
- &:selected:hover {
- background-color: transparentize($color, .85);
+ @if $flat {
+ background-color: transparent;
+ } @else {
+ background-color: transparentize($color, .84);
}
-
- &:focus:hover {
- background-color: transparentize($color, .8);
+ &:hover { background-color: transparentize($color, .9);}
+ &:selected, &:focus {
+ background-color: transparentize($color, .87);
+ &:hover { background-color: transparentize($color, .84);}
+ &:active { background-color: transparentize($color, .87);}
}
-
- &:selected,
- &:focus {
- background-color: transparentize($color, .9);
+ &:active { background-color: transparentize($color, .84);}
+ &:outlined, &:checked {
+ background-color: transparentize($color, .81);
+ &:active { background-color: transparentize($color, .78);}
+ &:hover { background-color: transparentize($color, .75);}
}
-
- &:outlined,
- &:checked,
- &:active {
- background-color: transparentize(darken($osd_bg_color, 10%), .5);
+ &:drop {
+ border: 2px solid transparentize($selected_bg_color, .2); //already 2px transparent so no jumping
+ background-color: transparentize($selected_bg_color, .8);
}
}
-
-// overview icons
-// mixin fo tiles in the overview
-@mixin overview_icon($color) {
- .overview-icon {
- @extend %tile;
- color: $color;
- }
-
- &:hover,
- &:focus:hover,
- &:selected {
- .overview-icon {
- background-color: transparentize($color, .9);
- }
+// overview icon, dash, app grid
+@mixin overview_icon($color, $flat: true) {
+ .overview-icon { @extend %tile; }
+ @if $flat {
+ .overview-icon { background-color: transparent;}
+ } @else {
+ .overview-icon { background-color: transparentize($color, .81);}
}
+ &:hover .overview-icon { background-color: transparentize($color, .9);}
- &:focus {
- .overview-icon {
- background-color: transparentize($color, .95);
- // border-color: $selected_bg_color;
- }
+ &:selected .overview-icon,
+ &:focus .overview-icon {
+ background-color: transparentize($color, .87);
+ &:hover .overview-icon { background-color: transparentize($color, .84);}
+ &:active .overview-icon { background-color: transparentize($color, .87);}
}
-
- &:drop {
- .overview-icon {
- border: 2px solid transparentize($selected_bg_color, .2); //already 2px transparent so no jumping
- background-color: transparentize($selected_bg_color, .8);
- }
+ &:active .overview-icon { background-color: transparentize($color, .84);}
+ &:outlined .overview-icon,
+ &:checked .overview-icon {
+ background-color: transparentize($color, .81);
+ &:active .overview-icon { background-color: transparentize($color, .78);}
+ &:hover .overview-icon { background-color: transparentize($color, .75);}
}
-
- &:active,
- &:focus:active,
- &:checked {
- .overview-icon {
- background-color: transparentize(darken($osd_bg_color, 10%), .5);
- }
+ &:drop .overview-icon {
+ border: 2px solid transparentize($selected_bg_color, .2); //already 2px transparent so no jumping
+ background-color: transparentize($selected_bg_color, .8);
}
}
-
// styling for elements within popovers that look like notifications
@mixin card($flat: false) {
border-radius: $base_border_radius;
// A11y / misc
@import 'widgets/a11y';
@import 'widgets/misc';
-@import 'widgets/tiled-previews';
@import 'widgets/keyboard';
@import 'widgets/looking-glass';
// Lock / login screens
// app icons
.icon-grid {
- row-spacing: $base_spacing * 2;
- column-spacing: $base_spacing * 2;
- max-row-spacing: $base_spacing * 12;
- max-column-spacing: $base_spacing * 12;
+ row-spacing: $base_padding * 2;
+ column-spacing: $base_padding * 2;
+ max-row-spacing: $base_padding * 12;
+ max-column-spacing: $base_padding * 12;
page-padding-top: $base_padding * 4;
page-padding-bottom: $base_padding * 4;
page-padding-left: $base_padding * 2;
/* App Icons */
-$app_grid_fg_color: #fff;
-
// Icon tiles in the app grid
-.app-well-app,
-%app_well_app {
- @include overview_icon($app_grid_fg_color);
+.app-well-app {
+ @include overview_icon($osd_fg_color);
+ .overview-icon {
+ padding: $base_padding*2;
+ }
.overview-icon.overview-icon-with-label {
- padding: 10px 8px 5px 8px;
-
> StBoxLayout {
- spacing: $base_spacing;
+ spacing: $base_padding;
}
}
}
-/* App Folders */
+// app folders
.app-well-app.app-folder {
- background-color: $dash_background_color;
- border-radius: $base_border_radius * 2; // same as %tile
+ @include overview_icon($osd_fg_color, $flat: false);
}
// expanded folder
-.app-folder-dialog { //style like the dash
- border-radius: 48px;
+.app-folder-dialog {
+ border-radius: $modal_radius*2;
background-color: $dash_background_color;
padding: 12px 0px 12px 0px;
& .folder-name-label,
& .folder-name-entry {
- font-size: 18pt;
- font-weight: 1000;
+ @extend %title_1;
}
& .folder-name-entry { width: 300px }
& .edit-folder-button {
@include button(undecorated);
- padding: 0;
width: 36px;
height: 36px;
border-radius: 18px;
}
& .icon-grid {
- row-spacing: $base_spacing * 2;
- column-spacing: $base_spacing * 5;
+ row-spacing: $base_padding * 2;
+ column-spacing: $base_padding * 5;
page-padding-top: 0;
page-padding-bottom: 0;
page-padding-left: 0;
height: 5px;
width: 5px;
border-radius:5px;
+ margin-bottom: 8px;
background-color: $osd_fg_color;
- margin-bottom: 2px;
}
// Rename popup for app folders
.rename-folder-popup {
.rename-folder-popup-item {
- spacing: $base_spacing;
+ spacing: $base_padding;
&:ltr, &:rtl { padding: 0 $base_padding * 2; }
}
}
-// right-click app menu
-.app-menu {
- max-width: 27.25em;
-}
-
// App Grid pagination indicators
.page-indicator {
padding: $base_padding $base_padding * 2 0;
.button {
@extend %button; // that's it
+ min-height: 22px;
}
/* Date/Time Menu */
// overall menu
-#calendarArea {}
+#calendarArea {
+ padding: $base_padding;
+}
// Calendar menu side column
.datemenu-calendar-column {
- spacing: $base_spacing;
- border: none;
- border-style: solid;
- border-color: $borders_color;
-
+ spacing: $base_padding;
&:ltr {padding-left: $base_padding;}
&:rtl {padding-right: $base_padding;}
-
- .datemenu-displays-box {spacing: $base_spacing;}
+ .datemenu-displays-box {spacing: $base_padding;}
}
/* today button (the date) */
// weekday label
.day-label {
- @include fontsize($base_font_size+1);
- color: $insensitive_fg_color;
- font-weight: bold;
+ @extend %heading;
}
// date label
.date-label {
- @include fontsize($base_font_size+7);
- font-weight: 1000;
+ @extend %title_2;
}
}
/* Calendar */
.calendar {
@include card(flat);
+ margin-top: 0;
// month header
.calendar-month-header {
// month label
.calendar-month-label {
- font-weight: bold;
+ color: lighten($fg_color,5%);
+ @extend %heading;
+ padding: 8px 0;
}
-
.pager-button {
background-color: transparent;
height: 32px;
$calendar_day_size: 32px;
.calendar-day-base {
- @include fontsize($base_font_size - 3);
text-align: center;
margin: 2px;
- height: $calendar_day_size;
- width: $calendar_day_size;
- border-radius: $calendar_day_size * 0.5 + 2px;
- font-feature-settings: "tnum";
+ padding: 0 !important;
+ height: $calendar_day_size !important;
+ width: $calendar_day_size !important;
+ border-radius: 99px;
+ @extend %numeric;
+ @extend %smaller;
&:hover {background-color: $hover_bg_color;}
&:focus {
- font-weight: 1000;
background-color: mix($bg_color, $selected_bg_color, 80%);
color: $selected_fg_color;
- box-shadow: 0 0 0 2px transparentize($selected_bg_color, 0.4);
+ box-shadow:inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
}
&:active,&:selected {
- font-weight: 1000;
color: $active_fg_color;
background-color: $active_bg_color;
&:focus {
color: $insensitive_fg_color;
padding-top: $base_padding;
height: 16px !important; // force heading to be smaller height
- @include fontsize($base_font_size - 2);
+ font-weight: bold;
+ @extend %smaller;
}
}
- .calendar-day {
- border-width: 0; // border collapse hack - see calendar.js
- }
-
+ .calendar-day {}
.calendar-work-day {}
-
- .calendar-nonwork-day {
- color: $insensitive_fg_color;
- }
-
+ .calendar-nonwork-day {color: $insensitive_fg_color;}
.calendar-other-month-day {
color: transparentize($fg_color, 0.5);
&.calendar-nonwork-day {
}
}
-
// Today
.calendar-today {
background-color: $selected_bg_color;
- font-weight: 1000;
+ font-weight: 800;
color: $selected_fg_color !important;
&:hover,&:focus {
.calendar-day-with-events {
background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/calendar-today-light.svg"),url("resource:///org/gnome/shell/theme/calendar-today.svg"));
background-size: contain;
- &.calendar-work-day {
- color: lighten($fg_color,10%);
- font-weight: bold;
- }
}
.calendar-week-number {
font-weight: bold;
font-feature-settings: "tnum";
margin: 6px;
- padding: $base_padding;
+ padding: 0 $base_padding;
border-radius: 3px;
background-color: darken($bg_color, 2%);
color: $insensitive_fg_color
padding: $base_padding * 2;
.events-box {
- spacing: $base_spacing;
+ spacing: $base_padding;
}
.events-list {
- spacing: 2 * $base_spacing;
+ spacing: 2 * $base_padding;
}
.events-title {
+ @extend %heading;
color: $insensitive_fg_color;
- font-weight: bold;
margin-bottom: $base_margin;
}
.event-time {
+ @extend %numeric;
+ @extend %caption;
color: $insensitive_fg_color;
- font-feature-settings: "tnum";
- @include fontsize($base_font_size - 1);
}
}
padding: $base_padding * 2;
.world-clocks-grid {
- spacing-rows: $base_spacing;
- spacing-columns: $base_spacing * 2;
+ spacing-rows: $base_padding;
+ spacing-columns: $base_padding * 2;
}
// title
.world-clocks-header {
+ @extend %heading;
color: $insensitive_fg_color;
- font-weight: bold;
}
// city label
.world-clocks-city {
color: $fg_color;
- @include fontsize($base_font_size);
- font-weight: normal;
}
// timezone time
.world-clocks-time {
- font-weight: bold;
+ @extend %heading;
+ @extend %numeric;
color: $fg_color;
- font-feature-settings: "tnum";
- @include fontsize($base_font_size);
&:ltr {text-align: right;}
&:rtl {text-align: left;}
// timezone offset label
.world-clocks-timezone {
+ @extend %numeric;
+ @extend %caption;
color: $insensitive_fg_color;
- font-feature-settings: "tnum";
- @include fontsize($base_font_size - 1);
}
}
padding: $base_padding * 2;
.weather-box {
- spacing: $base_spacing + $base_margin;
+ spacing: $base_padding + $base_margin;
}
.weather-header-box {
- spacing: $base_spacing;
+ spacing: $base_padding;
}
.weather-header {
color: $insensitive_fg_color;
- font-weight: bold;
+ @extend %heading;
&.location {
font-weight: normal;
- @include fontsize($base_font_size - 1);
}
}
.weather-grid {
- spacing-rows: $base_spacing;
- spacing-columns: $base_spacing * 2;
+ spacing-rows: $base_padding;
+ spacing-columns: $base_padding * 2;
}
.weather-forecast-time {
+ @extend %numeric;
+ @extend %caption;
color: darken($fg_color,30%);
- font-feature-settings: "tnum";
- @include fontsize($base_font_size - 2);
- font-weight: normal;
padding-top: 0.2em;
padding-bottom: 0.4em;
}
.weather-forecast-icon {
- icon-size: $base_icon_size * 2;
+ icon-size: $large_icon_size;
}
.weather-forecast-temp {
- font-weight: bold;
+ @extend %heading;
}
}
$dash_background_color: lighten($system_bg_color, 5%);
$dash_placeholder_size: 32px;
-$dash_padding: $base_padding + 4px; // 10px
-$dash_spacing: $base_padding / 4;
-$dash_bottom_margin: $base_margin * 4;
-$dash_border_radius: $modal_radius + 8px;
+$dash_padding: $base_padding*2; // 12px
+$dash_border_radius: $modal_radius + $dash_padding;
// container for the dash
#dash {
- @include fontsize($base_font_size - 2);
- margin-top: $base_margin * 3;
- padding: $dash_padding;
+ @extend %caption;
+ margin: 2em;
.placeholder {
// background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg");
height: $dash_placeholder_size;
}
- // icon on the dash
- .overview-icon {
- padding: $base_padding+2px;
- }
-
// Running app indicator (also shown in app grid)
.app-well-app-running-dot {
- height: 5px;
- width: 5px;
- border-radius:5px;
- background-color: $osd_fg_color;
- margin-top: 2px;
- margin-bottom: 12px;
+ margin-bottom: 15px; // hardcoded
}
}
.dash-background {
background-color: $dash_background_color;
border-radius: $dash_border_radius;
- margin-bottom: 0; // this keeps things vertically centered
padding: $dash_padding;
+ spacing: $base_padding;
}
// items on the dash
.dash-item-container {
-
// each app item on the dash
- .app-well-app {
- margin: 2px;
+ .app-well-app .overview-icon {
+ margin: 0 4px;
+ padding: $base_padding;
}
// show apps button
- .show-apps {
- @include overview_icon($osd_fg_color);
- margin: 2px;
- }
+ .show-apps { @include overview_icon($osd_fg_color);}
}
// separator between favourites and running apps
.dash-separator {
width: 1px;
- margin: 0 $base_margin*2;
background-color: $borders_color;
}
/* Modal Dialogs */
.headline {
- @include fontsize($base_font_size + 1);
+ @extend %title_4;
}
.modal-dialog {
.message-dialog-title {
text-align: center;
- font-size: 18pt;
- font-weight: 800;
+ @extend %title_2;
- &.lightweight {
- font-size: 13pt;
- font-weight: 800;
- }
+ &.lightweight { @extend %title_4;}
}
.message-dialog-description { text-align: center; }
}
.dialog-list-title {
text-align: center;
- font-weight: bold;
+ @extend %heading;
}
.dialog-list-scrollview { max-height: 200px; }
.dialog-list-item-title { font-weight: bold; }
.dialog-list-item-description {
color: darken($fg_color,5%);
- @include fontsize($base_font_size - 1);
+ @extend %caption;
}
}
}
}
.run-dialog-entry { width: 20em; }
.run-dialog-description {
- @include fontsize($base_font_size - 1);
+ @extend %caption;
text-align: center;
color: darken($fg_color, 20%);
}
.prompt-dialog-info-label,
.prompt-dialog-null-label {
text-align: center;
- @include fontsize($base_font_size - 1);
+ @extend %caption;
}
.prompt-dialog-error-label {
StEntry {
border-radius: $base_border_radius;
padding: 8px;
- border-width: 0;
color: $fg_color;
+
@include entry(normal);
- //&:hover { @include entry(hover);}
+ &:hover { @include entry(hover);}
&:focus { @include entry(focus);}
&:insensitive { @include entry(insensitive);}
+
selection-background-color: $selected_bg_color;
selected-color: $selected_fg_color;
+
StIcon.capslock-warning {
icon-size: 16px;
warning-color: $warning_color;
padding: 0 4px;
}
+
StIcon.peek-password {
icon-size: $base_icon_size;
padding: 0 4px;
}
+
StLabel.hint-text {
margin-left: 2px;
color: transparentize($fg_color, 0.3);
}
.candidate-popup-content {
- padding: 0.5em;
- spacing: 0.3em;
+ padding: $base_padding;
+ spacing: $base_padding;
+ @extend .popup-menu-content;
}
.candidate-index {
- padding: 0 0.5em 0 0;
- color: darken($fg_color,10%);
+ padding: 0;
+ padding-right: $base_padding;
+ color: $insensitive_fg_color;
}
.candidate-box {
- padding: 0.3em 0.5em 0.3em 0.5em;
+ padding: $base_padding $base_padding*2 $base_padding $base_padding*2;
border-radius: $base_border_radius;
- &:selected,&:hover { background-color: $selected_bg_color; color: $selected_fg_color; }
+ &:selected { background-color: $selected_bg_color; color: $selected_fg_color; }
+ &:hover { background-color: $hover_bg_color; color: $hover_fg_color; }
}
.candidate-page-button-box {
height: 2em;
- .vertical & { padding-top: 0.5em; }
- .horizontal & { padding-left: 0.5em; }
+ .vertical & { padding-top: $base_padding*2; }
+ .horizontal & { padding-left: $base_padding*2; }
}
-.candidate-page-button {
- padding: 4px;
-}
+.candidate-page-button { padding: $base_padding;}
-.candidate-page-button-previous { border-radius: $base_border_radius 0px 0px $base_border_radius; border-right-width: 0; }
-.candidate-page-button-next { border-radius: 0px $base_border_radius $base_border_radius 0px; }
-.candidate-page-button-icon { icon-size: 1em; }
+.candidate-page-button-previous { border-radius: $base_border_radius 0px 0px $base_border_radius; border-right-width: 0;box-shadow: none;}
+.candidate-page-button-next { border-radius: 0px $base_border_radius $base_border_radius 0px;box-shadow: none;}
+.candidate-page-button-icon { icon-size: $base_icon_size; }
@include keyboard_key(normal, $key_bg_color, $osd_fg_color);
&:focus { @include keyboard_key(focus);}
- &:hover, &:checked { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
+ &:hover { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
&:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); }
+ &:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); }
&:grayed { //FIXMEy
background-color: darken($bg_color, 3%);
// non-character keys
&.default-key {
@include keyboard_key(normal, $default_key_bg_color, $osd_fg_color);
- &:hover, &:checked {@include keyboard_key(hover, $default_key_bg_color, $osd_fg_color);}
+ &:hover {@include keyboard_key(hover, $default_key_bg_color, $osd_fg_color);}
&:active { @include keyboard_key(active, $default_key_bg_color, $osd_fg_color);}
+ &:checked { @include keyboard_key(checked, $default_key_bg_color, $osd_fg_color);}
border-radius: $key_border_radius;
}
// enter key is suggested-action
&.enter-key {
@include keyboard_key(normal, $selected_bg_color, $selected_fg_color);
- &:hover, &:checked { @include keyboard_key(hover, lighten($selected_bg_color, 3%), $selected_fg_color);}
- &:active {@include keyboard_key(active, darken($selected_bg_color, 2%), $selected_fg_color);}
+ &:hover { @include keyboard_key(hover, $selected_bg_color, $selected_fg_color);}
+ &:active {@include keyboard_key(active, $selected_bg_color, $selected_fg_color);}
+ &:checked {@include keyboard_key(checked, $selected_bg_color, $selected_fg_color);}
border-radius: $key_border_radius;
color: $osd_fg_color;
}
-arrow-border-color: lighten($osd_bg_color, 9%);
-arrow-base: 20px;
-arrow-rise: 10px;
- -boxpointer-gap: $base_spacing;
+ -boxpointer-gap: $base_padding;
padding: $base_padding;
.keyboard-key {
@include keyboard_key(normal, $key_bg_color, $osd_fg_color);
&:focus { @include keyboard_key(focus);}
- &:hover, &:checked { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
+ &:hover { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
&:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); }
+ &:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); }
border-radius:$key_border_radius;
}
@include keyboard_key(undecorated, $key_bg_color, $osd_fg_color);
&:focus { @include keyboard_key(focus);}
- &:hover, &:checked { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
+ &:hover { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
&:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); }
+ &:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); }
}
}
.login-dialog-session-list-button {
padding: 0;
border-radius: 99px;
- width: $base_icon_size * 2;
- height: $base_icon_size * 2;
+ width: $large_icon_size;
+ height: $large_icon_size;
border-color: darken($system_bg_color, 3%);
background-color: darken($system_bg_color, 3%);
}
.login-dialog-not-listed-label {
- @include fontsize($base_font_size - 1);
+ @extend %caption;
font-weight: bold;
color: darken($osd_fg_color,30%);
padding-top: 1em;
.login-dialog-prompt-layout {
padding-top: 24px;
padding-bottom: 12px;
- spacing: $base_spacing * 2;
+ spacing: $base_padding * 2;
width: 23em;
}
// Custom styling for unlock entry
.unlock-dialog {
StEntry {
+ border:none !important;
&:focus {
- box-shadow:none;
background-color: transparentize($fg_color, 0.9);
}
&:insensitive {
border: 1px solid $osd_outer_borders_color;
color: $osd_fg_color;
padding: $base_padding;
- spacing: $base_spacing;
+ spacing: $base_padding;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
& > #Toolbar {
padding: $base_padding;
border-radius: 0;
background-color: transparent;
- spacing: $base_spacing;
+ spacing: $base_padding;
.lg-toolbar-button {
padding: $base_padding $base_padding*2;
}
.labels {
- spacing: $base_spacing;
+ spacing: $base_padding;
}
.notebook-tab {
}
}
- StBoxLayout#EvalBox { padding: 4px; spacing: $base_spacing; padding: $base_padding; }
- StBoxLayout#ResultsArea { spacing: $base_spacing; padding: $base_padding; }
+ StBoxLayout#EvalBox { padding: 4px; spacing: $base_padding; padding: $base_padding; }
+ StBoxLayout#ResultsArea { spacing: $base_padding; padding: $base_padding; }
}
.lg-dialog {
}
.lg-completions-text {
- font-size: .9em;
+ @extend %caption;
font-style: italic;
}
.lg-obj-inspector-title {
- spacing: $base_spacing;
+ spacing: $base_padding;
}
.lg-obj-inspector-button {
.lg-extensions-list {
padding: $base_padding;
- spacing: $base_spacing;
+ spacing: $base_padding;
}
.lg-extension {
}
.lg-extension-name {
- font-weight: bold;
+ @extend %heading;
}
.lg-extension-meta {
- spacing: $base_spacing;
+ spacing: $base_padding;
}
// Inspector
}
.lg-debug-flag-button {
- StLabel { padding: $base_spacing, 2 * $base_spacing; }
+ StLabel { padding: $base_padding, 2 * $base_padding; }
color: $fg_color;
&:hover { color: lighten($fg_color, 20%); }
}
.lg-debug-flags-header {
- padding-top: 2 * $base_spacing;
- font-size: 120%;
- font-weight: bold;
+ padding-top: 2 * $base_padding;
padding: $base_padding;
+ @extend %title_2;
}
// main list
.message-list {
width: 32em;
- border: none;
- border-style: solid;
- border-color: $borders_color;
- padding: $base_padding;
+ border: solid $borders_color;
// padding and margins to account for scrollbar
&:ltr {margin-left: 0; margin-right: $base_margin; padding-right: $base_padding; border-right-width: 1px; }
&:rtl {margin-right: 0; margin-left: $base_margin; padding-left: $base_padding; border-left-width: 1px; }
.message-list-placeholder {
- font-weight:1000;
- font-size: 18pt;
- color: transparentize($fg_color, .8);
- spacing: 12px;
+ @extend %title_2;
+ color: transparentize($insensitive_fg_color, .5);
// icon size and color
> StIcon {
}
.message-list-sections {
- spacing: $base_spacing;
+ spacing: $base_padding;
margin: 0;
padding-bottom: $base_padding;
.message-list-section,
.message-list-section-list {
- spacing: $base_spacing;
+ spacing: $base_padding;
}
// do-not-disturb + clear button
.message-list-controls {
// NOTE: remove the padding if notification_bubble could remove margin for drop shadow
padding: $base_padding;
- margin: 0;
- spacing: $base_spacing;
+ spacing: $base_padding;
+ @extend %heading;
.dnd-button {
// We need this because the focus outline isn't inset like for the buttons
// icon size and color
> StIcon {
- icon-size: $base_icon_size*2; // 32px
+ icon-size: $large_icon_size; // 32px
-st-icon-style: symbolic;
}
background-color: $bg_color;
border: 1px solid transparent;
border-radius: $base_border_radius;
- icon-size: $base_icon_size * 2 !important; // 32px
+ icon-size: $large_icon_size !important; // 32px
padding: ($base_padding*2 + 2); // 16px
}
}
.caps-lock-warning-label {
text-align: center;
padding-bottom: 8px;
- @include fontsize($base_font_size - 1);
+ @extend %caption;
color: $warning_color;
}
.workspace-animation {
background-color: $system_bg_color;
}
+
+/* Tiled window previews */
+.tile-preview {
+ background-color: transparentize($selected_bg_color,0.5);
+ border: 1px solid $selected_bg_color;
+}
-/* Network Dialogs */
+/* Select Network dialogs */
.nm-dialog {
max-height: 34em;
min-height: 31em;
padding: 24px;
}
-.nm-dialog-airplane-box { spacing: 12px; }
-
-.nm-dialog-airplane-headline {
- font-weight: bold;
- text-align: center;
-}
-
-.nm-dialog-airplane-text { color: $fg_color; }
-
-// header
-.nm-dialog-header {
- font-weight: bold;
-}
-.nm-dialog-subheader {
- color: $insensitive_fg_color;
-}
-
-.nm-dialog-header-icon {
- icon-size: $base_icon_size * 2;
-}
+.nm-dialog-header { @extend %heading; }
+.nm-dialog-subheader { color: $insensitive_fg_color;}
+.nm-dialog-header-icon { icon-size: $large_icon_size;}
.nm-dialog-header-hbox { spacing: 10px; }
-// airplane mode
-.nm-dialog-airplane-headline {
- font-weight: bold;
-}
-
-.nm-dialog-airplane-text {
- color: $insensitive_fg_color;
-}
-
-// list of networks
.nm-dialog-scroll-view {
- border: none;
padding:$base_padding;
border-radius: $base_border_radius;
- background-color: darken($bg_color, 3%);
+ background-color: $base_color;
}
-// list item
.nm-dialog-item {
- @include fontsize($base_font_size);
- border: none;
padding: $base_padding * 2;
- spacing: 0px;
- text-shadow: none;
- icon-shadow: none;
&:selected {
background-color: $selected_bg_color;
- color: $selected_fg_color;
-
border-radius: $base_border_radius - 3px;
+ color: $selected_fg_color;
}
-
- &:hover {
- background-color:$hover_bg_color;
- }
+ &:hover { background-color:$hover_bg_color;}
}
-// icons in list
.nm-dialog-icon { icon-size: $base_icon_size; }
-.nm-dialog-icons { spacing: $base_spacing * 2; }
+.nm-dialog-icons { spacing: $base_padding * 2; }
// no networks
-.no-networks-label { color: $insensitive_fg_color; }
.no-networks-box { spacing: $base_padding; }
+.no-networks-label { color: $insensitive_fg_color; }
+
+// airplane mode
+.nm-dialog-airplane-box {
+ text-align: center;
+ spacing: 12px;
+}
+.nm-dialog-airplane-headline { @extend %title_3;}
+.nm-dialog-airplane-text { color: $insensitive_fg_color;}
$notification_banner_width: 34em;
$notification_banner_radius: $base_border_radius*1.5;
-// make radius of buttons fit in bubble corner (banner radius - width of focus ring)
-$notification_button_radius: ($notification_banner_radius - 2px);
-
// Banner notifications
.notification-banner {
min-height: $notification_banner_height;
.osd-window {
@extend %osd_panel;
+ @extend %heading;
text-align: center;
font-weight: bold;
- &, & > * { spacing: $base_spacing * 2; } // 12px
- margin: 4em;
+ spacing: $base_padding * 2; // 12px
+ padding: $base_padding * 2 $base_padding * 3;
+ & > * { spacing: 8px; }
+ margin-bottom: 4em;
- StIcon {
- icon-size:$base_icon_size * 2;
-
- &:first-child:last-child { padding: 0 $base_padding * 2; }
- }
+ StIcon { icon-size:$large_icon_size;}
.osd-monitor-label { font-size: 3em; }
+ StLabel {
+ &:ltr { margin-right: 6px; }
+ &:rtl { margin-left: 6px; }
+ }
+
.level {
+ margin-bottom: 4px;
+ &:first-child { margin-bottom: 0px; }
+
height: $osd_levelbar_height;
min-width:$base_icon_size * 10;
-barlevel-height: $osd_levelbar_height;
-barlevel-active-background-color: $osd_fg_color;
-barlevel-overdrive-color: $destructive_color;
-barlevel-overdrive-separator-width: 3px;
- &:ltr {margin-right: 16px;}
- &:rtl {margin-left: 16px;}
+ &:ltr { margin-right: 6px; }
+ &:rtl { margin-left: 6px; }
}
}
/* OVERVIEW */
.controls-manager, .secondary-monitor-workspaces {
- spacing: $base_spacing * 2;
+ spacing: $base_padding * 2;
}
#overviewGroup {
background-color: $panel_bg_color;
font-weight: bold;
height: $panel_height;
- font-feature-settings: "tnum";
+ @extend %numeric;
transition-duration: $panel_transition_duration;
// transparent panel on lock & login screens
box-shadow: inset 0 0 0 100px $screenshot_ui_button_red;
StBoxLayout {
- spacing: $base_spacing;
+ spacing: $base_padding;
}
StIcon {
// App Menu
#appMenu {
- spacing: $base_spacing;
+ spacing: $base_padding;
.label-shadow { color: transparent; }
}
#appMenu .panel-status-menu-box {
padding: 0 $base_padding;
- spacing: $base_spacing;
+ spacing: $base_padding;
}
// the popover itself
.popup-menu-boxpointer {
- // override popover styles for panel menus so
- // we can draw a box shadow and no arrow
- -arrow-border-radius: $modal_radius;
- -arrow-background-color: transparent;
- -arrow-border-color: transparent;
- -arrow-border-width: 0;
- -arrow-base: 0;
- -arrow-rise: $base_margin; // use this as top margin
- -arrow-box-shadow: none; // dreaming bugzilla #689995
margin: $base_margin; // used as distance from the screen edge
}
&.panel-menu {
-boxpointer-gap: $base_margin+2px; // distance from the panel
margin-bottom: 1.75em; // so it doesn't touch the bottom of the screen
-
- // style the menu content instead
- .popup-menu-content {
- padding: $base_padding*1.5;
- }
-
- .popup-menu-item {}
}
}
-// popover content;
+// popover content
.popup-menu-content {
padding: $base_padding;
- border-radius: $modal_radius;
- border: 1px solid $borders_edge;
+ // account for margin oddities
+ padding-top: $base_padding - 2px !important;
+ padding-bottom: $base_padding - 2px !important;
+ border-radius: $modal_radius - 2px;
+ border: 1px solid $borders_edge;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
background-color: $bg_color;
}
// menu items
.popup-menu-item {
- spacing: $base_spacing;
- padding: $base_padding*1.5;
+ padding: $base_padding*1.5 $base_padding*2;
margin: 2px 0;
border-radius: $base_border_radius;
transition: 0.2s all ease;
+ background-color: transparent;
- &:ltr {padding-right:$base_padding; padding-left: 0;}
- &:rtl {padding-right: 0; padding-left:$base_padding;}
+ &:focus, &:hover {
+ background-color: $hover_bg_color !important;
+ &:active { background-color: $active_bg_color !important;}
+ }
- &:hover {
- background-color: $hover_bg_color;
- }
+ &:checked {background-color: $checked_bg_color !important;}
&:checked {
- background-color: $hover_bg_color;
margin-bottom: 0;
- box-shadow: inset 0 -1px 0 0 darken($hover_bg_color, 3%);
+ box-shadow: inset 0 -1px 0 0 darken($checked_bg_color, 5%);
border-radius: $base_border_radius $base_border_radius 0 0;
-
- &:hover {
- background-color: lighten($hover_bg_color, 5%);
- }
- }
-
- &.selected {
- background-color: transparentize($fg_color, if($variant=='light', 0.7, 0.9));
- color: $fg_color;
+ &:focus,&:hover { background-color: lighten($checked_bg_color, 3%) !important;}
+ &:active { background-color: lighten($checked_bg_color, 5%) !important;}
}
&:active {
- background-color: lighten($active_bg_color,3%);
- color: lighten($active_fg_color,3%);
+ background-color: lighten($active_bg_color, 5%);
+ color: $active_fg_color;
}
&:insensitive {color: transparentize($fg_color,0.5);}
}
-// all icons and other graphical elements
+
+// all other graphical elements (sliders)
.popup-inactive-menu-item {
color: $fg_color;
-
- // "Open Windows" label
- font-weight: bold;
- font-size: smaller;
-
- &:insensitive {color: $insensitive_fg_color;}
+ &:insensitive { color: $insensitive_fg_color; }
}
// symbolic icons in popover
.popup-menu-arrow,
.popup-menu-icon {
- icon-size: 16px !important;
+ icon-size: 16px !important; // for some reason the variable doesn't work here
}
.popup-menu-arrow {
- margin-right: $base_margin;
+ &:ltr {margin-right: $base_margin;}
+ &:rtl {margin-left: $base_margin;}
}
+
// popover submenus
.popup-sub-menu {
- border:none;
- background-color: $hover_bg_color;
+ background-color: $checked_bg_color;
border-radius: 0 0 $base_border_radius $base_border_radius;
.popup-menu-ornament {
- min-width: 14px !important;
+ min-width: $base_icon_size !important;
}
+ // submenu specific styles
.popup-menu-item {
border-radius: 0;
margin: 0;
- padding: $base_padding*1.5 $base_padding*2;
&:last-child {
border-radius: 0 0 $base_border_radius $base_border_radius;
}
+
+ &:focus,&:hover { background-color: lighten($hover_bg_color, 10%) !important;}
+ &:checked {
+ background-color: lighten($checked_bg_color, 10%) !important;
+ &:focus,&:hover { background-color: lighten($checked_bg_color, 8%) !important;}
+ }
+ &:active { background-color: lighten($active_bg_color, 10%) !important;}
}
.popup-menu-section {
- .popup-menu-item:last-child:hover {border-radius: 0 }
+ .popup-menu-item:last-child {
+ &:hover,&:focus {border-radius: 0;}
+ }
&:last-child .popup-menu-item:last-child {
border-radius: 0 0 $base_border_radius $base_border_radius;
}
// container for radio and check boxes
.popup-menu-ornament {
+ @extend %heading;
width: 1.2em;
- font-weight: bold;
- font-size: 1em;
+ text-align: center !important;
&:ltr {text-align: right;};
&:rtl {text-align: left;};
.aggregate-menu {
min-width: 22em;
- // this is unneeded in at the top-level this menu, hide it
- .popup-menu-ornament {width:0;padding:0;margin:0;}
-
- .popup-menu-item {
- &:ltr {padding-left:$base_padding;padding-right:$base_padding*2;}
- &:rtl {padding-right:$base_padding;padding-left:$base_padding*2;}
- }
+ // this is unneeded at the top-level in this menu, hide it
+ .popup-menu-ornament { width: 0 !important; }
// lock screen, shutdown, etc. buttons
.popup-menu-icon {
- padding:0;
- margin: 0 $base_margin;
-st-icon-style: symbolic;
+ &:ltr {margin-right: $base_margin*2;}
+ &:rtl {margin-left: $base_margin*2;}
}
- // account for icons in submenus with padding
+ // account for ornaments in submenus with padding
.popup-sub-menu .popup-menu-item > :first-child {
- &:ltr {
- padding-left: 0;
- margin-left: $base_icon_size;
- }
- &:rtl {
- padding-right: 0;
- margin-right: $base_icon_size;
+ // this value is hardcoded for visual effect
+ &:ltr { margin-left: $base_margin*2;}
+ &:rtl { margin-right: $base_margin*2;}
+ }
+}
+
+// right-click (and panel) app menu
+.app-menu {
+ max-width: 27.25em;
+ .popup-menu-content { margin: $base_margin;}
+
+ &.panel-menu {
+ .popup-menu-content { margin: 0;} // avoid doubling up margin
+ }
+
+ // this is unneeded at the top-level in this menu, hide it
+ .popup-menu-ornament { width: 0 !important; }
+
+ .popup-inactive-menu-item:first-child {
+ // "Open Windows" label
+ > StLabel {
+ @extend %caption_heading;
+ &:ltr {margin-right: $base_margin*2;}
+ &:rtl {margin-left: $base_margin*2;}
}
}
}
.unlock-dialog-clock-time {
font-size: 64pt;
padding-top: 42px;
- font-feature-settings: "tnum";
+ @extend %numeric;
}
.unlock-dialog-clock-date {
// Screenshot UI
.icon-label-button-container {
- spacing: $base_spacing;
- font-size: $base_font_size - 3pt;
+ spacing: $base_padding;
+ @extend %caption;
- StIcon {
- icon-size: 32px;
- }
+ StIcon { icon-size: 32px;}
}
-$screenshot_ui_panel_padding: 18px;
+$screenshot_ui_panel_padding: $base_padding*3;
$screenshot_ui_shot_cast_margin: 21px;
-$screenshot_ui_shot_cast_border_radius: 12px;
-$screenshot_ui_panel_border_radius: $screenshot_ui_shot_cast_border_radius + $screenshot_ui_shot_cast_margin;
+$screenshot_ui_panel_border_radius: $modal_radius + $screenshot_ui_shot_cast_margin;
$screenshot_ui_shot_cast_spacing: 3px;
-$screenshot_ui_button_red: #e01b24;
+$screenshot_ui_button_red: $error_color;
.screenshot-ui-panel {
- background-color: $osd_bg_color;
+ @extend %osd_panel;
border-radius: $screenshot_ui_panel_border_radius;
padding: $screenshot_ui_panel_padding;
// Reduce the bottom padding a little to accommodate the large capture button.
padding-bottom: $screenshot_ui_panel_padding - 6px;
- margin-bottom: $base_margin * 8;
+ margin-bottom: 4em;
spacing: $base_padding * 2;
}
.screenshot-ui-close-button {
- background-color: $osd_bg_color;
- color: $osd_fg_color;
- border-radius: 99px;
- padding: 6px;
- height: 30px;
- width: 30px;
- box-shadow: -1px 1px 5px 0px rgba(0,0,0,0.5);
- margin-top: 8px;
-
+ @extend .window-close; // copy window close button
+ padding: $base_padding; // but with more padding
&.left { margin-left: 8px; }
&.right { margin-right: 8px; }
-
- & StIcon { icon-size: 24px; }
-
- &:hover {
- background-color: lighten($osd_bg_color, 15%);
- }
-
- &:active {
- color: transparentize($osd_fg_color, 0.2);
- background-color: darken($osd_bg_color, 5%);
- }
}
.screenshot-ui-type-button {
- padding: $base_padding * 2 $base_padding * 3;
+ @extend %osd_button;
+ padding: $base_padding * 2 $base_padding * 3 !important;
border-radius: $screenshot_ui_panel_border_radius - $screenshot_ui_panel_padding;
- font-weight: bold;
- &:hover, &:focus { background-color: $hover_bg_color; }
- &:active { background-color: $active_bg_color; }
- &:checked { background-color: $hover_bg_color; }
- &:insensitive { color: $insensitive_fg_color; }
}
.screenshot-ui-capture-button {
width: 36px;
height: 36px;
border-radius: 99px;
- border: 4px white;
+ border: 4px $osd_fg_color;
padding: 4px;
.screenshot-ui-capture-button-circle {
- background-color: white;
+ background-color: $osd_fg_color;
transition-duration: 200ms;
&:hover, &:focus { background-color: $hover_bg_color; }
border-radius: 99px;
&:hover, &:focus {
.screenshot-ui-capture-button-circle {
- background-color: darken(white, 15%);
+ background-color: darken($osd_fg_color, 15%);
}
}
&:active {
.screenshot-ui-capture-button-circle {
- background-color: darken(white, 50%);
+ background-color: darken($osd_fg_color, 50%);
}
}
.screenshot-ui-shot-cast-container {
background-color: $hover_bg_color;
- border-radius: $screenshot_ui_shot_cast_border_radius;
+ border-radius: $modal_radius;
padding: $screenshot_ui_shot_cast_spacing;
spacing: $screenshot_ui_shot_cast_spacing;
}
.screenshot-ui-shot-cast-button {
- padding: $base_padding $base_padding * 1.5;
+ padding: $base_padding $base_padding*2;
background-color: transparent;
&:hover, &:focus { background-color: lighten($hover_bg_color, 5%); }
- &:active { background-color: $active_bg_color; }
+ &:active { background-color: lighten($active_bg_color,5%); }
&:checked { background-color: white; color: black; }
- border-radius: $screenshot_ui_shot_cast_border_radius - $screenshot_ui_shot_cast_spacing;
+ border-radius: $modal_radius - $screenshot_ui_shot_cast_spacing;
- StIcon {
- icon-size: $base_icon_size;
- }
+ StIcon { icon-size: $base_icon_size; }
}
.screenshot-ui-show-pointer-button {
- padding: $base_padding * 2;
+ @extend %osd_button;
border-radius: 99px;
- background-color: $hover_bg_color;
- &:hover, &:focus { background-color: lighten($hover_bg_color, 5%); }
- &:active { background-color: $active_bg_color; }
- &:checked { background-color: darken($hover_bg_color, 10%); }
-
- StIcon {
- icon-size: $base_icon_size;
- }
+ padding: $base_padding * 2 !important;
+ StIcon { icon-size: $base_icon_size; }
}
.screenshot-ui-area-indicator-shade {
- background-color: rgba(0, 0, 0, .3);
+ background-color: rgba(0,0,0,.3);
}
.screenshot-ui-area-selector {
.screenshot-ui-area-indicator-shade {
- background-color: rgba(0, 0, 0, .5);
+ background-color: rgba(0,0,0,.5);
}
.screenshot-ui-area-indicator-selection {
.screenshot-ui-area-selector-handle {
border-radius: 99px;
background-color: white;
- box-shadow: 0 1px 3px 2px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 1px 3px 2px rgba(0,0,0,0.2);
width: 24px;
height: 24px;
}
.screenshot-ui-window-selector-window-border {
transition-duration: 200ms;
- border-radius: 18px;
+ border-radius: $modal_radius;
border: 6px transparent;
}
.screenshot-ui-screen-selector {
transition-duration: 200ms;
- background-color: rgba(0, 0, 0, .5);
+ background-color: rgba(0,0,0,.5);
- &:hover { background-color: rgba(0, 0, 0, .3); }
- &:active { background-color: rgba(0, 0, 0, .7); }
+ &:hover { background-color: rgba(0,0,0,.3); }
+ &:active { background-color: rgba(0,0,0,.7); }
&:checked {
background-color: transparent;
border: 2px white;
%search_entry,
.search-entry {
- background-color: lighten($bg_color, 5%);
- border-width: 2px;
- border-color: transparent;
border-radius: $search_entry_height * 0.5; // half the height
- color: transparentize($fg_color,0.3);
- margin-top: $base_spacing * 2;
- margin-bottom: $base_spacing;
+
+ margin-top: $base_padding * 2;
+ margin-bottom: $base_padding;
padding: $base_padding+1 $base_padding+3;
width: $search_entry_width;
-
- &:hover {
- background-color: lighten($hover_bg_color, 5%);
- color: lighten($hover_fg_color, 5%);
- }
- &:focus {
- border-style: solid;
- border-color: $selected_bg_color;
- color: $fg_color;
- box-shadow: none;
- }
+ @include entry(normal);
+ &:hover { @include entry(hover);}
+ &:focus { @include entry(focus);}
+ &:insensitive { @include entry(insensitive);}
- .search-entry-icon {
+ .search-entry-icon {
color: inherit;
icon-size: $base_icon_size;
margin-top: 2px; // center vertically
box-shadow: none;
text-shadow: none;
color: $osd_fg_color;
- padding: $base_padding * 3;
+ padding: $base_padding*2;
margin: $base_margin;
// This is the space between the provider icon and the results container
}
%search_section_content_item {
- @include tile($osd_fg_color);
-
+ @include tile_button($osd_fg_color);
+ margin: $base_margin;
border-radius: $base_border_radius !important;
}
// "no results" text
.search-statustext {
- @extend %status_text;
+ @extend %large_title;
}
.grid-search-results {
- spacing: $base_spacing * 6;
+ spacing: $base_padding * 6;
}
// Search results with icons
.grid-search-result {
- @extend %app_well_app;
+ @extend .app-well-app;
}
// search result provider
// content
.list-search-provider-content {
- spacing: $base_spacing * 2;
+ spacing: $base_padding * 2;
// provider labels
.list-search-provider-details {
// search results list
.list-search-results {
- spacing: $base_spacing;
+ spacing: $base_padding;
}
// search result listitem
// list item title (with leading icon)
.list-search-result-title {
- spacing: $base_spacing * 2;
+ spacing: $base_padding * 2;
// font-weight: bold;
}
$slider_size: 16px;
.slider {
- height: $slider_size;
// slider trough
-barlevel-height: 4px;
-barlevel-background-color: if($variant == 'light', transparentize($fg_color, 0.6), transparentize($fg_color, 0.8)); //background of the trough
-slider-handle-radius: $slider_size * 0.5; // half the size of the size
-slider-handle-border-width: 0;
-slider-handle-border-color: transparent; // because 0 width
- margin: 0 $base_padding;
-
- color: $fg_color;
- &:hover { color: $hover_bg_color; }
- &:active { color: $active_bg_color; }
}
// the full screen container of the switcher
.switcher-popup {
padding: 0;
- spacing: $base_spacing * 4;
+ spacing: $base_padding * 4;
}
// switcher onscreen panel
// container for items in list
.switcher-list-item-container {
- spacing: $base_spacing * 2;
+ spacing: $base_padding * 2;
}
// each item in the list
.item-box {
- @include tile($osd_fg_color);
+
+ @include tile_button($osd_fg_color);
}
.separator {
// container of thumbnails
.thumbnail-box {
padding: 2px;
- spacing: $base_spacing;
+ spacing: $base_padding;
}
// window thumbnail itself
+++ /dev/null
-
-/* Tiled window previews */
-$tile_corner_radius: $base_border_radius + 1px;
-.tile-preview {
- background-color: transparentize($selected_bg_color,0.5);
- border: 1px solid $selected_bg_color;
-}
-
-.tile-preview-left.on-primary {
- border-radius: $tile_corner_radius 0 0 0;
-}
-
-.tile-preview-right.on-primary {
- border-radius: 0 $tile_corner_radius 0 0;
-}
-
-.tile-preview-left.tile-preview-right.on-primary {
- border-radius: $tile_corner_radius $tile_corner_radius 0 0;
-}
/* Window Picker */
-$window_picker_spacing: $base_spacing; // 6px
+$window_picker_spacing: $base_padding; // 6px
$window_picker_padding: $base_padding * 2; // 12px
$window_thumbnail_label_color: transparentize($osd_bg_color, 0.4);
+$window_close_button_color: darken(transparentize($osd_bg_color, .05), 3%);
$window_close_button_size: 30px;
$window_close_button_padding: 3px;
// Close button
.window-close {
- background-color: $osd_bg_color;
+ background-color: $window_close_button_color;
color: $osd_fg_color;
border-radius: $window_close_button_size * 0.5 + $window_close_button_padding * 2;
padding: $window_close_button_padding;
height: $window_close_button_size;
width: $window_close_button_size;
- box-shadow: -1px 1px 5px 0px rgba(0,0,0,0.5);
transition-duration: 300ms;
- & StIcon { icon-size: 24px; }
+ & StIcon { icon-size: 24px; } // uses non standard icon size
&:hover {
- background-color: lighten($osd_bg_color, 15%);
+ background-color: mix($osd_fg_color, $window_close_button_color, 15%);
}
&:active {
color: transparentize($osd_fg_color, 0.2);
- background-color: darken($osd_bg_color, 5%);
+ background-color: darken($window_close_button_color, 5%);
}
}
/* Workspace Switcher */
-$ws_indicator_height: $base_icon_size * 2;
+$ws_indicator_height: $large_icon_size;
$ws_dot_active: $ws_indicator_height / 3;
$ws_dot_inactive: $ws_indicator_height / 6;
.workspace-switcher {
@extend %osd_panel;
- margin: 4em;
- spacing: $base_spacing * 2;
+ margin-bottom: 4em;
+ spacing: $base_padding * 2;
+ padding: $base_padding * 2 $base_padding * 3;
}
.ws-switcher-indicator {
// thumbnails in overview
.workspace-thumbnails {
visible-width: 32px; //amount visible before hover
- spacing: $base_spacing;
+ spacing: $base_padding;
padding: $base_padding;
.workspace-thumbnail {
'gnome-shell-sass/widgets/_slider.scss',
'gnome-shell-sass/widgets/_switcher-popup.scss',
'gnome-shell-sass/widgets/_switches.scss',
- 'gnome-shell-sass/widgets/_tiled-previews.scss',
'gnome-shell-sass/widgets/_window-picker.scss',
'gnome-shell-sass/widgets/_workspace-switcher.scss',
'gnome-shell-sass/widgets/_workspace-thumbnails.scss'
-<svg width="48" height="26" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -291.18)"><rect style="fill:#fff;stroke:none;stroke-width:1;marker:none;fill-opacity:.15000001" width="48" height="26" x="-48" y="291.18" ry="13" fill="#3081e3" rx="13" transform="scale(-1 1)"/><rect ry="11" rx="11" y="293.18" x="-24" height="22" width="22" style="stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7" transform="scale(-1 1)"/><path style="fill:#f8f7f7;fill-opacity:1;stroke:none;stroke-width:2;stroke-linejoin:round;stroke-dashoffset:2" d="M29 303.18h12v2H29z"/></g></svg>
\ No newline at end of file
+<svg width="48" height="26" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -291.18)"><rect ry="11" rx="11" y="299.18" x="30" height="10" width="10" style="fill:none;fill-opacity:1;stroke:#f8f7f7;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker:none" fill="#f8f7f7" stroke-linecap="round" stroke-linejoin="round"/><rect style="fill:#fff;stroke:none;stroke-width:1;marker:none;fill-opacity:.15000001" width="48" height="26" x="-48" y="291.18" ry="13" fill="#3081e3" rx="13" transform="scale(-1 1)"/><rect ry="11" rx="11" y="293.18" x="-24" height="22" width="22" style="stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7" transform="scale(-1 1)"/></g></svg>
\ No newline at end of file
-<svg width="48" height="26" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -291.18)" stroke="#2b73cc"><rect style="fill:#3584e4;stroke:none;stroke-width:1;marker:none" width="48" height="26" y="291.18" ry="13" fill="#3081e3" rx="13" stroke="none"/><rect ry="11" rx="11" y="293.18" x="24" height="22" width="22" style="stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7" stroke="none"/><rect ry="11" rx="11" y="299.18" x="8" height="10" width="10" style="fill:none;fill-opacity:1;stroke:#f8f7f7;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker:none" fill="#f8f7f7" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
\ No newline at end of file
+<svg width="48" height="26" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -291.18)" stroke="none"><rect style="fill:#3584e4;stroke:none;stroke-width:1;marker:none" width="48" height="26" y="291.18" ry="13" fill="#3081e3" rx="13"/><rect ry="11" rx="11" y="293.18" x="24" height="22" width="22" style="stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7"/></g><path style="fill:#f8f7f7;fill-opacity:1;stroke:none;stroke-width:2;stroke-linejoin:round;stroke-dashoffset:2" d="M14 7v12h-2V7Z"/></svg>
\ No newline at end of file
projects / gnome-shell.git / commitdiff
![data/theme/toggle-off-hc.svg](/"http://www.example.com/cgi/"?p=gnome-shell.git;a=blob;f=data/theme/toggle-off-hc.svg;h=036794f512998263e0823a6e70f6cada4b2e7dc8;hb=39301a744ee303b8c4fa496cb766ae55bec6fae0){kind=link}
![history](/"http://www.example.com/cgi/"?p=gnome-shell.git;a=history;f=data/theme/toggle-off-hc.svg;hb=39301a744ee303b8c4fa496cb766ae55bec6fae0){kind=link}
![data/theme/toggle-on-hc.svg](/"http://www.example.com/cgi/"?p=gnome-shell.git;a=blob;f=data/theme/toggle-on-hc.svg;h=2d553c64900bcea70853cc057854db4ac8228d5c;hb=39301a744ee303b8c4fa496cb766ae55bec6fae0){kind=link}
![history](/"http://www.example.com/cgi/"?p=gnome-shell.git;a=history;f=data/theme/toggle-on-hc.svg;hb=39301a744ee303b8c4fa496cb766ae55bec6fae0){kind=link}
![a/data/theme/toggle-off-hc.svg](/"http://www.example.com/cgi/"?p=gnome-shell.git;a=blob;f=data/theme/toggle-off-hc.svg;h=3becc7018a5290a415258d2ba37382c12816a5b9){kind=link}
![-1](/"http://www.example.com/cgi/"?p=gnome-shell.git;a=blob;f=data/theme/toggle-off-hc.svg;h=3becc7018a5290a415258d2ba37382c12816a5b9#l1){kind=link}
![+1](/"http://www.example.com/cgi/"?p=gnome-shell.git;a=blob;f=data/theme/toggle-off-hc.svg;h=036794f512998263e0823a6e70f6cada4b2e7dc8;hb=39301a744ee303b8c4fa496cb766ae55bec6fae0#l1){kind=link}
![a/data/theme/toggle-on-hc.svg](/"http://www.example.com/cgi/"?p=gnome-shell.git;a=blob;f=data/theme/toggle-on-hc.svg;h=7daad90430a7705091240466b96843f02993e39a){kind=link}
![-1](/"http://www.example.com/cgi/"?p=gnome-shell.git;a=blob;f=data/theme/toggle-on-hc.svg;h=7daad90430a7705091240466b96843f02993e39a#l1){kind=link}
![+1](/"http://www.example.com/cgi/"?p=gnome-shell.git;a=blob;f=data/theme/toggle-on-hc.svg;h=2d553c64900bcea70853cc057854db4ac8228d5c;hb=39301a744ee303b8c4fa496cb766ae55bec6fae0#l1){kind=link}